<template>
  <div class="transaction-step">
    <Steps direction="vertical" :active="4"
      style="flex-grow: 1;">
      <Step>
        <h3>1. 注册并登录</h3>
        <Grid :column-num="2">
          <GridItem>
            注册快回收账号，或者直接在登录页面，用手机号码获取短信验证码，直接完成注册并登录。
          </GridItem>
          <GridItem>
            <Image :src="StepOne" fit="contain" />
          </GridItem>
        </Grid>
      </Step>
      <Step>
        <h3>2. 实名认证</h3>
        <Grid :column-num="2">
          <GridItem>
            <Image :src="StepTwo" fit="contain" />
          </GridItem>
          <GridItem>
            <Highlight
              source-string="输入真实姓名及身份证号码,并完成人脸识别，为了账户安全，实人认证后才可提现"
              :keywords="['真实姓名', '身份证号码', '人脸识别', '账户安全', '提现']" />
          </GridItem>
        </Grid>
      </Step>
      <Step>
        <h3>3. 提交卡密</h3>
        <Grid :column-num="2">
          <GridItem>
            选择正确的面值，提交相对应正确的卡号卡密。等待快回收系统验证，恶意提交会被封号的。
          </GridItem>
          <GridItem>
            <Image :src="StepThree"
              fit="contain" />
          </GridItem>
        </Grid>
      </Step>
      <Step>
        <h3>4. 账户提现</h3>
        <Grid :column-num="2">
          <GridItem>
            <Image :src="StepFour" fit="contain" />
          </GridItem>
          <GridItem>
            添加本人名下的提现账户，进入提现页面提现，资金秒到账，偶尔有延迟，交易成功，如此简单
          </GridItem>
        </Grid>
      </Step>
    </Steps>
  </div>
</template>
<script setup lang="ts">
import {
  Grid,
  GridItem,
  Highlight,
  Image,
  Step, Steps,
} from 'vant';

import StepOne from '@/assets/images/step1.png';
import StepTwo from '@/assets/images/step2.png';
import StepThree from '@/assets/images/step3.png';
import StepFour from '@/assets/images/step4.png';

</script>
<style lang="less" scoped>
.transaction-step {
  height: 100%;
  display: flex;
  flex-direction: column;

}
</style>
